<template>
  <div class="Image_scoring_standard">
    <p class="heard_title">超声科评分标准</p>
    <el-tabs type="border-card" style="margin: 0 10px" @tab-click="tab_click">
      <el-tab-pane label="超声评分标准" style="height: 820px">
        <div style="margin-bottom: 5px">
          <el-input
            size="small"
            style="display: inline-block; width: 20%; margin-left: 10px"
            placeholder="请输入人员姓名"
            v-model="name_ry"
          ></el-input>
          <el-button
            size="small"
            icon="el-icon-search"
            style="margin-left: 10px"
            @click="setTable"
          ></el-button>
          <span style="margin-left: 50px; font-size: 18px">
            当前组织：<span style="font-weight: 700">{{ orgName }}</span>
            当前人员：<span style="font-weight: 700">{{ userName }}</span>
            当前表为：<span style="font-weight: 700">{{ ScoreNo }}</span>
          </span>
        </div>
        <el-row>
          <el-col :span="4">
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :highlight-current="true"
            ></el-tree>
          </el-col>
          <el-col :span="3">
            <template>
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @row-click="row_click"
                height="540"
              >
                <el-table-column prop="Username" label="人员姓名">
                </el-table-column>
              </el-table>
            </template>
          </el-col>
          <el-col :span="15" style="padding: 0 10px">
            <transition name="el-fade-in-linear">
              <table style="width: 100%" border="1" v-show="isShow">
                <tr>
                  <td
                    colspan="4"
                    style="
                      text-align: center;
                      font-weight: 700;
                      font-size: 18px;
                      padding: 5px;
                    "
                  >
                    超声科图像质量评价评分
                  </td>
                </tr>
                <tr class="tr_style">
                  <td>项目</td>
                  <td>评价内容和方法</td>
                  <td>扣分</td>
                  <td>超声科id集合（多个中间用“/”隔开）</td>
                </tr>
                <tr class="tr_style">
                  <td>图像清晰度</td>
                  <td>一副图像显示不清晰扣 1 分</td>
                  <td>
                    <el-slider
                      v-model="fromList[0].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </td>
                  <td>
                    <el-input v-model="fromList[0].LinkNo"></el-input>
                  </td>
                </tr>
                <tr class="tr_style">
                  <td>图像均匀性</td>
                  <td>一副图像不均匀扣 1 分</td>
                  <td>
                    <el-slider
                      v-model="fromList[1].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </td>
                  <td>
                    <el-input v-model="fromList[1].LinkNo"></el-input>
                  </td>
                </tr>

                <tr class="tr_style">
                  <td>超声切面标准性</td>
                  <td>一副图像不标准扣 1 分，漏一个常规切面扣 2 分</td>
                  <td>
                    <el-slider
                      v-model="fromList[2].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </td>
                  <td>
                    <el-input v-model="fromList[2].LinkNo"></el-input>
                  </td>
                </tr>

                <tr class="tr_style">
                  <th>伪相识别</th>
                  <th>缺伪像图像相关图像扣 5 分</th>
                  <th>
                    <el-slider
                      v-model="fromList[3].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </th>
                  <td>
                    <el-input v-model="fromList[3].LinkNo"></el-input>
                  </td>
                </tr>

                <tr class="tr_style">
                  <th>彩色血流显示情况</th>
                  <th>缺规定血流图像一副扣 2 分</th>
                  <th>
                    <el-slider
                      v-model="fromList[4].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </th>
                  <td>
                    <el-input v-model="fromList[4].LinkNo"></el-input>
                  </td>
                </tr>

                <tr class="tr_style">
                  <th>图像于超声报告相关性</th>
                  <th>缺报告相关性常规切面图像一副扣 1 分</th>
                  <th>
                    <el-slider
                      v-model="fromList[5].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </th>
                  <td>
                    <el-input v-model="fromList[5].LinkNo"></el-input>
                  </td>
                </tr>

                <tr class="tr_style">
                  <th>图像有无斑点、雪花细粒、网纹</th>
                  <th>一副图像有斑点、雪花细粒、网纹扣 l 分</th>
                  <th>
                    <el-slider
                      v-model="fromList[6].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </th>
                  <td>
                    <el-input v-model="fromList[6].LinkNo"></el-input>
                  </td>
                </tr>

                <tr class="tr_style">
                  <th>图像与临床疾病相关性</th>
                  <th>报告所选图像与疾病相关性无关扣 5 分</th>
                  <th>
                    <el-slider
                      v-model="fromList[7].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </th>
                  <td>
                    <el-input v-model="fromList[7].LinkNo"></el-input>
                  </td>
                </tr>

                <tr class="tr_style">
                  <th>探测深度（要占 1 / 2 以上）</th>
                  <th>一副图像未达到 l / 2 扣 l 分</th>
                  <th>
                    <el-slider
                      v-model="fromList[8].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </th>
                  <td>
                    <el-input v-model="fromList[8].LinkNo"></el-input>
                  </td>
                </tr>

                <tr class="tr_style">
                  <th>工作频率与脏器相关性</th>
                  <th>一副图像工作频率与脏器相关性不符扣 l 分</th>
                  <th>
                    <el-slider
                      v-model="fromList[9].Score"
                      show-input
                      @change="isNum"
                    >
                    </el-slider>
                  </th>
                  <td>
                    <el-input v-model="fromList[9].LinkNo"></el-input>
                  </td>
                </tr>

                <tr class="tr_style">
                  <th>合计</th>
                  <td style="text-align: center" colspan="3">{{ num }} 分</td>
                </tr>
              </table>
            </transition>
          </el-col>
        </el-row>
        <div style="text-align: center; margin-top: 35px">
          <el-button type="primary" @click="ADD">提 交</el-button>
          <el-button type="" @click="NNO">重 置</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="超声质量要求" style="height: 800px">
        <h3 style="text-align: center; margin-bottom: 20px">
          超声质量要求
          <el-button
            size="small"
            @click="font_size_change('small')"
            style="float: right"
            >恢复大小</el-button
          >
          <el-button
            size="small"
            @click="font_size_change('big')"
            style="float: right; margin-right: 10px"
            >字体放大</el-button
          >
        </h3>
        <div :style="text_size">
          <p>
            1 ，肝脏：正常肝脏 6
            个切面（第一肝门，门静脉二维图像，门睁脉血流频谱图像并有测值，第二肝门图像，肝脏工字状结构图像，肝左叶图像）。异常肝脏
            8
            个切面（第一肝门，门静脉二维图像，门静脉血流频谱并有测值，第二肝门图像，肝脏工字状结构图像，肝左叶图像，异常部位二维及彩色）
          </p>
          <p>
            2 ．胆囊：正常 l 个切面（显示胆囊颈部，胆囊底部）异常 2
            个切面（显示胆囊颈部＋胆囊底部，异常部位图像）
          </p>
          <p>
            3 ．胰腺：正常 2
            个切面（胰腺的二维＋彩色血流图像，显示胰头，胰体，胰尾）
          </p>
          <p>4 ．异常 3 个切面（胰头，胰体，胰尾，胰腺彩色血流图像）</p>
          <p>
            5 ．脾脏：正常 2 个切面（脾脏全长及脾门彩色血流图像）异常 3
            个切而（脾脏全长切面，异常二维及彩色血流图像）
          </p>
          <p>
            6 ．泌尿系统：正常双肾 2
            个切面（肾脏纵切面二维及彩色血流图像）异常双肾4个切面（肾脏纵切面二维及彩色血流图像，异常部位二维及彩色）
          </p>
          <p>
            7 ．膀肤：正常 2 个切面（膀肤三角，膀肤底部）异常 4
            个切面（膀肤三角，膀胱底部，异常部位二维及彩色）
          </p>
          <p>
            7 ．前列腺：正常 3 个切面（前列腺纵切面，前列腺横切面，前列腺彩色！
            血流图像）经直肠检查前列腺： 4
            个切面（前列腺纵切面，前列腺横切面，正常及异常前列腺彩色血流图像）
          </p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      orgName: "",
      orgId: null,
      userName: "",
      userId: 38,
      tableData: [],
      value: 0,
      isShow: false,
      text_size: "",
      fromList: [
        {
          GradingID: 16,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 17,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 18,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 19,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 20,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 21,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 22,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 23,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 24,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 25,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
      ],
      num: 100,
      ScoreNo: "",
      name_ry: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (this.$route.query.Token != null && this.$route.query.Token != "") {
      console.log(this.$route.query.Token, "KKKKKKKKKKKKKKKKKKKKKK");
      localStorage.setItem("token", this.$route.query.Token);
    } else {
    }
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getTreeData();
    this.getTableData();
    this.getFromData();
  },
  // 组件方法
  methods: {
    getTreeData() {
      // 获取组织树数据
      this.$post(baseUrl.hrIp + "/auth/organs/searchlist", {}).then((res) => {
        if (res.code == 1) {
          this.data = res.data;
          this.orgName = res.data[0].label;
          this.orgId = res.data[0].value;
        }
      });
    },
    handleNodeClick(data) {
      // 组织树点击事件
      this.orgName = data.label;
      this.orgId = data.value;
      this.isShow = false;
      this.getTableData();
    },
    getTableData() {
      // 获取人员表格数据
      this.$get(
        baseUrl.hrIp + "/hr/employees?page=1&limit=10&name=&OrgID=" + this.orgId
      ).then((res) => {
        if (res.code == 1) {
          this.tableData = res.data.list;
          this.userId = res.data.list[0].Id;
          this.userName = res.data.list[0].Username;
          setTimeout((_) => {
            this.isShow = true;
          }, 200);
        }
      });
    },
    row_click(row) {
      // 人员表格点击事件
      this.userName = row.Username;
      this.userId = row.Id;
      this.isShow = false;
      setTimeout((_) => {
        this.isShow = true;
      }, 200);
    },
    tableRowClassName({ row }) {
      // 设置人员表格高亮显示事件
      if (row.Id === this.userId) {
        return "warning-row";
      }
      return "";
    },
    tab_click() {
      // tab栏点击事件
      this.text_size = "";
    },
    font_size_change(flag) {
      // 更改字体大小事件
      if (flag == "big") {
        this.text_size = "font-size: 18px;font-weight:700";
      }
      if (flag == "small") {
        this.text_size = "";
      }
    },
    isNum() {
      // 计算合计方法
      var num = 0;
      for (var i in this.fromList) {
        num = num + this.fromList[i].Score * 1;
      }
      num >= 100 ? (this.num = 0) : (this.num = 100 - num);
    },
    NNO() {
      // 重置按钮事件
      this.fromList = [
        {
          GradingID: 16,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 17,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 18,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 19,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 20,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 21,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 22,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 23,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 24,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
        {
          GradingID: 25,
          ScoreNo: 2,
          Score: 0,
          LinkNo: "",
        },
      ];
      // this.ScoreNo = ''
      this.isNum();
    },
    ADD() {
      // 提交按钮事件
      var d = new Date();
      var y = d.getFullYear();
      var m = d.getMonth() + 1;
      m < 10 ? (m = "0" + m) : "" + m;
      var time = y + "-" + m;
      let body = {
        HospitalID: this.orgId,
        DoctorID: this.userId,
        SumScore: this.num,
        ScoreNo: this.ScoreNo,
        GradingNo: "2",
        GroupName: "超声",
        YearMonth: time,
        qc_ScoreDetail: JSON.stringify(this.fromList),
      };
      this.$post("/qc_Score/Create", body).then((res) => {
        this.getFromData();
        this.NNO();
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    getFromData() {
      // 获取总表数据
      let body = {
        currentpage: 1,
        pagesize: 2,
        Condition: "1=1",
      };
      this.$get("/CommonInfo/GetNo").then((res) => {
        if (res.code == 0) {
          this.ScoreNo = res.data;
        }
      });
    },
    containsSearchText(str, searchText) {
      return str.indexOf(searchText) !== -1;
    },
    setTable() {
      if (this.name_ry == "") {
        this.getTableData();
        return;
      }
      var list = [];
      for (var i in this.tableData) {
        if (this.containsSearchText(this.tableData[i].Username, this.name_ry)) {
          list.push(this.tableData[i]);
        }
      }
      this.tableData = list;
    },
  },
};
</script>

<style>
.el-table .warning-row {
  background: rgb(240, 247, 255);
  font-weight: 700;
  font-size: 14px;
}
.Image_scoring_standard .tr_style td {
  padding: 3px 10px;
  font-weight: normal;
}
.Image_scoring_standard .tr_style th {
  padding: 3px 10px;
  font-weight: normal;
}
.Image_scoring_standard .el-slider__input {
  width: 100px !important;
}
.Image_scoring_standard .el-slider__runway {
  width: 60px !important;
  margin-right: 110px !important;
}
</style>
